<template>
  <div class="content-container">
    <h2 class="content-title">{{ pageTitle }}</h2>
    
    <!-- 个人信息管理页面的特殊显示 -->
    <div v-if="pageTitle === '个人信息管理'" class="profile-section">
      <div class="profile-header">
        <div class="avatar">👤</div>
        <div class="profile-basic">
          <h3 class="profile-name">{{ userProfile.name }}</h3>
          <p class="profile-id">ID: {{ userProfile.id }}</p>
          <p class="profile-role">{{ userProfile.roleText }}</p>
        </div>
      </div>
      
      <div class="profile-info">
        <div class="info-section">
          <h4 class="info-title">基本信息</h4>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">姓名:</span>
              <span class="info-value">{{ userProfile.name }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">学号:</span>
              <span class="info-value">{{ userProfile.studentId }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">邮箱:</span>
              <span class="info-value">{{ userProfile.email }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">电话:</span>
              <span class="info-value">{{ userProfile.phone }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">专业:</span>
              <span class="info-value">{{ userProfile.major }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">年级:</span>
              <span class="info-value">{{ userProfile.grade }}</span>
            </div>
          </div>
        </div>
        
        <div class="info-section">
          <h4 class="info-title">社团信息</h4>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">已加入社团:</span>
              <span class="info-value">{{ userProfile.joinedSocietiesCount }} 个</span>
            </div>
            <div class="info-item">
              <span class="info-label">参与活动:</span>
              <span class="info-value">{{ userProfile.participatedEventsCount }} 次</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 社团列表页面的特殊显示 -->
    <div v-if="pageTitle === '所有社团列表'" class="clubs-section">
      <!-- 搜索和筛选 -->
      <div class="clubs-search-filter">
        <div class="search-box">
          <input 
            type="text" 
            v-model="searchQuery" 
            placeholder="搜索社团名称或关键词..."
            class="search-input"
          />
        </div>
        <div class="filter-dropdown">
          <select v-model="selectedCategory" class="filter-select">
            <option value="">全部类别</option>
            <option value="技术">技术类</option>
            <option value="文艺">文艺类</option>
            <option value="体育">体育类</option>
            <option value="学术">学术类</option>
            <option value="公益">公益类</option>
          </select>
        </div>
      </div>

      <!-- 社团卡片网格 -->
      <div class="clubs-grid">
        <div 
          v-for="club in filteredClubs" 
          :key="club.id" 
          class="club-card"
        >
          <div class="club-avatar">{{ club.avatar }}</div>
          <div class="club-info">
            <h4 class="club-name">{{ club.name }}</h4>
            <div class="club-meta">
              <span class="club-category">{{ club.category }}</span>
              <span class="club-members">{{ club.membersCount }} 成员</span>
            </div>
            <p class="club-description">{{ club.description }}</p>
            <div class="club-actions">
                <button 
                  class="btn-join" 
                  :class="{ joined: club.isJoined }"
                  @click="toggleJoinClub(club.id)"
                >
                  {{ club.isJoined ? '已加入' : '加入社团' }}
                </button>
                <button 
                  class="btn-detail"
                  @click="viewClubDetail(club.id)"
                >查看详情</button>
              </div>
          </div>
        </div>
      </div>

      <!-- 无结果提示 -->
      <div v-if="filteredClubs.length === 0" class="no-results">
        <p>未找到符合条件的社团</p>
      </div>
    </div>

    <!-- 其他页面的通用内容 -->
    <template v-else>
      <!-- 统计卡片 -->
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-icon users-icon">👥</div>
          <div class="stat-content">
            <div class="stat-number">{{ totalMembers }}</div>
            <div class="stat-label">总成员数</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon events-icon">📅</div>
          <div class="stat-content">
            <div class="stat-number">{{ totalEvents }}</div>
            <div class="stat-label">活动数量</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon notices-icon">📢</div>
          <div class="stat-content">
            <div class="stat-number">{{ totalNotices }}</div>
            <div class="stat-label">通知数量</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon active-icon">✅</div>
          <div class="stat-content">
            <div class="stat-number">{{ activeEvents }}</div>
            <div class="stat-label">进行中活动</div>
          </div>
        </div>
      </div>

      <!-- 最近活动 -->
      <div class="recent-events">
        <h3 class="section-title">最近活动</h3>
        <div class="events-list">
          <div class="event-item" v-for="(event, index) in recentEvents" :key="index">
            <div class="event-info">
              <h4 class="event-name">{{ event.name }}</h4>
              <p class="event-time">{{ event.time }}</p>
            </div>
            <div class="event-status" :class="event.statusClass">{{ event.status }}</div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// Props
const props = defineProps({
  pageTitle: {
    type: String,
    default: '数据概览'
  }
})

// 用户个人信息数据
const userProfile = ref({
  id: 'student_10086',
  name: '张明',
  studentId: '2022001001',
  email: 'zhangming@example.com',
  phone: '13812345678',
  major: '计算机科学与技术',
  grade: '2022级',
  role: 'student',
  roleText: '学生',
  joinedSocietiesCount: 3,
  participatedEventsCount: 12
})

// 统计数据
const totalMembers = ref(128)
const totalEvents = ref(45)
const totalNotices = ref(32)
const activeEvents = ref(12)
const recentEvents = ref([
  { name: '社团招新活动', time: '2024-06-15 14:00', status: '即将开始', statusClass: 'status-upcoming' },
  { name: '技术分享会', time: '2024-06-10 10:30', status: '已完成', statusClass: 'status-completed' },
  { name: '成员团建', time: '2024-06-05 16:00', status: '已完成', statusClass: 'status-completed' }
])

// 社团列表数据
const clubs = ref([
  {
    id: 'club_001',
    name: '计算机技术协会',
    avatar: '💻',
    category: '技术',
    membersCount: 156,
    description: '致力于计算机技术学习与交流，涵盖编程、算法、人工智能等多个领域。',
    isJoined: true
  },
  {
    id: 'club_002',
    name: '文学社',
    avatar: '📚',
    category: '文艺',
    membersCount: 89,
    description: '热爱文学创作与阅读分享，定期举办读书会和文学沙龙活动。',
    isJoined: false
  },
  {
    id: 'club_003',
    name: '篮球社',
    avatar: '🏀',
    category: '体育',
    membersCount: 120,
    description: '篮球爱好者的聚集地，每周组织训练和比赛，提高篮球技能。',
    isJoined: false
  },
  {
    id: 'club_004',
    name: '数学建模协会',
    avatar: '📊',
    category: '学术',
    membersCount: 76,
    description: '专注数学建模研究与竞赛，培养数据分析和解决问题的能力。',
    isJoined: true
  },
  {
    id: 'club_005',
    name: '志愿者协会',
    avatar: '🤝',
    category: '公益',
    membersCount: 203,
    description: '组织各类志愿服务活动，传递爱心，服务社会。',
    isJoined: false
  },
  {
    id: 'club_006',
    name: '摄影协会',
    avatar: '📷',
    category: '文艺',
    membersCount: 67,
    description: '用镜头记录美好瞬间，分享摄影技巧，举办摄影展览。',
    isJoined: false
  },
  {
    id: 'club_007',
    name: '机器人俱乐部',
    avatar: '🤖',
    category: '技术',
    membersCount: 45,
    description: '机器人设计、制作与编程，参加各类机器人竞赛。',
    isJoined: false
  },
  {
    id: 'club_008',
    name: '环保协会',
    avatar: '🌱',
    category: '公益',
    membersCount: 98,
    description: '关注环境保护，组织环保宣传和实践活动。',
    isJoined: true
  }
])

// 搜索和筛选
const searchQuery = ref('')
const selectedCategory = ref('')

// 筛选后的社团列表
const filteredClubs = computed(() => {
  return clubs.value.filter(club => {
    const matchesSearch = !searchQuery.value || 
      club.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      club.description.toLowerCase().includes(searchQuery.value.toLowerCase())
    const matchesCategory = !selectedCategory.value || club.category === selectedCategory.value
    return matchesSearch && matchesCategory
  })
})

// 加入/退出社团
function toggleJoinClub(clubId) {
  const club = clubs.value.find(c => c.id === clubId)
  if (club) {
    club.isJoined = !club.isJoined
    // 这里可以添加实际的API调用逻辑
    console.log(`${club.isJoined ? '加入' : '退出'}社团: ${club.name}`)
  }
}

// 查看社团详情
function viewClubDetail(clubId) {
  // 这里可以添加查看社团详情的逻辑，例如跳转到详情页
  console.log('查看社团详情:', clubId)
  // 可以使用路由跳转，如：router.push(`/clubs/${clubId}`)
}
</script>

<style scoped>
.content-container {
  width: 100%;
}

.content-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 24px;
}

/* 统计卡片 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 24px;
}

.users-icon {
  background-color: #e1f5fe;
}

.events-icon {
  background-color: #e8f5e9;
}

.notices-icon {
  background-color: #fff3e0;
}

.active-icon {
  background-color: #f3e5f5;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

/* 最近活动 */
.recent-events {
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.event-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  transition: background-color 0.3s;
}

.event-item:hover {
  background-color: #fafafa;
}

.event-info {
  flex: 1;
}

.event-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.event-time {
  font-size: 14px;
  color: #666;
}

.event-status {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-upcoming {
  background-color: #e3f2fd;
  color: #1976d2;
}

.status-completed {
  background-color: #e8f5e9;
  color: #388e3c;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
  /* 个人信息管理页面样式 */
  .profile-section {
    background-color: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  
  .profile-header {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 24px;
  }
  
  .avatar {
    width: 100px;
    height: 100px;
    background-color: #e3f2fd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
  }
  
  .profile-basic {
    flex: 1;
  }
  
  .profile-name {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
  }
  
  .profile-id {
    font-size: 14px;
    color: #666;
    margin: 0 0 4px 0;
  }
  
  .profile-role {
    font-size: 14px;
    color: #1976d2;
    margin: 0;
  }
  
  .profile-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
  }
  
  .info-section {
    background-color: #fafafa;
    border-radius: 8px;
    padding: 20px;
  }
  
  .info-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px 0;
  }
  
  .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  
  .info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .info-label {
    font-size: 14px;
    color: #666;
  }
  
  .info-value {
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }
  
  /* 社团列表页面样式 */
.clubs-section {
  background-color: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.clubs-search-filter {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.search-box {
  flex: 1;
  min-width: 250px;
}

.search-input {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
}

.search-input:focus {
  border-color: #1976d2;
}

.filter-dropdown {
  min-width: 150px;
}

.filter-select {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  background-color: white;
  outline: none;
  cursor: pointer;
  transition: border-color 0.3s;
}

.filter-select:focus {
  border-color: #1976d2;
}

.clubs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.club-card {
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.club-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.club-avatar {
  width: 60px;
  height: 60px;
  background-color: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 16px;
}

.club-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.club-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.club-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
}

.club-category {
  background-color: #e3f2fd;
  color: #1976d2;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}

.club-members {
  color: #666;
}

.club-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  flex: 1;
  margin: 0 0 16px 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.club-actions {
  display: flex;
  gap: 12px;
}

.btn-join,
.btn-detail {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-join {
  flex: 1;
  background-color: #1976d2;
  color: white;
}

.btn-join:hover:not(.joined) {
  background-color: #1565c0;
}

.btn-join.joined {
  background-color: #e8f5e9;
  color: #388e3c;
  cursor: default;
}

.btn-detail {
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #e0e0e0;
}

.btn-detail:hover {
  background-color: #eeeeee;
}

.no-results {
  text-align: center;
  padding: 40px;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-header {
    flex-direction: column;
    text-align: center;
  }
  
  .profile-info {
    grid-template-columns: 1fr;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .clubs-grid {
    grid-template-columns: 1fr;
  }
  
  .clubs-search-filter {
    flex-direction: column;
  }
  
  .search-box,
  .filter-dropdown {
    width: 100%;
  }
}
</style>